<template>
  <div class="distribut">
    <div style="margin-top: 20px; margin-bottom: 20px">
      <!-- 查询  -->
      <el-input
        style="width: 200px; margin-left: 190px"
        v-model="search"
        size="large"
        placeholder="输入关键字搜索"
      />

      <el-badge
        :value="tables.length ? tables.length : 0"
        class="item"
        style="margin-left: 100px; margin-right: 10px"
      >
        <el-button size="large" @click="toggleSelection(1)">全选</el-button>
      </el-badge>
      <el-button @click="toggleSelection()">取消选择</el-button>

      <el-select v-model="distributvalue" clearable placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.distributvalue"
          :label="item.distributvalue"
          :value="item.distributlabel"
        >
        </el-option>
      </el-select>
      <el-badge
        :value="distributData.length ? distributData.length : 0"
        class="item"
        type="primary"
      >
        <el-button size="large" @click="adminApplyRoleAll"
          >一键分配角色</el-button
        >
      </el-badge>
    </div>
    <el-table
      ref="multipleTable"
      :row-key="getRowKeys"
      :data="tables"
      tooltip-effect="dark"
      style="width: 80%; text-align: center; margin: 0 auto"
      max-height="500px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" reserve-selection fixed width="55">
      </el-table-column>
      <el-table-column
        prop="uid"
        label="id"
        width="100"
        sortable
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="200"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="telephone"
        label="电话"
        width="200"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="username"
        label="名称"
        width="200"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        width="200"
        show-overflow-tooltip
      >
      </el-table-column>

      <el-table-column
        prop="specialized"
        label="领域"
        width="200"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="biography"
        label="个人简介"
        width="200"
        show-overflow-tooltip
      >
      </el-table-column>
      <!-- 分配角色 -->
      <el-table-column fixed="right" label="分配角色" width="220">
        <template slot-scope="scope">
          <el-select
            style="width: 130px"
            v-model="scope.row.distributvalue"
            @change="getIputValue(scope.row)"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.distributvalue"
              :label="item.distributvalue"
              :value="item.distributlabel"
            >
            </el-option>
          </el-select>
          <el-button @click="adminApplyRole(scope.row)">确定</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mixin } from "../../mixin";
export default {
  name: "AssignRoles",
  data() {
    return {
      search: "", //查询
      distributData: [], //所有要分配角色账号的id
      tableData: [], //表格数据
      multipleSelection: [], //存入的是选择后的数据
      options: [
        //角色分配select框
      ],
      inputDistributId: "", //input框选择的id
      inputDistribut: "", //input框选择的值
      distributId: "", //点击确定要分配的id
      distributvalue: "", //一键分配值
    };
  },
  //混入，引入时间戳处理函数
  mixins: [mixin],
  computed: {
    // 模糊搜索
    tables() {
      const search = this.search;

      if (search) {
        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        // 注意： filter() 不会对空数组进行检测。
        // 注意： filter() 不会改变原始数组。
        return this.tableData.filter((data) => {
          // some() 方法用于检测数组中的元素是否满足指定条件;
          // some() 方法会依次执行数组的每个元素：
          // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
          // 如果没有满足条件的元素，则返回false。
          // 注意： some() 不会对空数组进行检测。
          // 注意： some() 不会改变原始数组。
          return Object.keys(data).some((key) => {
            // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
            // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
            return String(data[key]).toLowerCase().indexOf(search) > -1;
          });
        });
      }
      return this.tableData;
    },
  },
  methods: {
    // 表格的全选与取消全选
    toggleSelection(rows) {
      if (rows) {
        this.$refs.multipleTable.toggleAllSelection();
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      // 将选择的数据存入multipleSelection中
      this.multipleSelection = val;
      // 将multipleSelection中的article_id存入到allapprovedData中
      this.distributData = [];
      for (var i = 0; i < this.multipleSelection.length; i++) {
        this.distributData.push(this.multipleSelection[i].uid);
      }
      console.log("xuanze", this.distributData);
    },
    // element表格固定写法
    getRowKeys(row) {
      return row.uid;
    },

    // 查看所有角色为用户和没有角色的用户信息
    lookAllRoleUsers() {
      this.$http({
        method: "post",
        url: "role/lookAllRoleUsers",
      }).then(({ data }) => {
        console.log("页面渲染", data);
        this.tableData = [];
        if (data.flag) {
          // 将后端传过来的数据存入tableData中
          this.tableData = data.data;
        }
      });
      this.toggleSelection(); //取消全选
      this.distributData = [];
    },
    // 获取所有角色
    getRole() {
      this.$http({
        method: "post",
        url: "jurisdiction/queryAllRoles",
        params: {
          keywords: "", //博客id
        },
      }).then(({ data }) => {
        console.log("角色", data);
        if (data.flag) {
          // 将后端传过来的数据存入options中
          for (var i = 0; i < data.data.length; i++) {
            this.options.push({
              distributvalue: data.data[i].roleName,
              distributlabel: data.data[i].rid,
            });
          }
        }
      });
    },
    // 选取单个input框里面的id和所选角色
    getIputValue(value) {
      console.log(value);
      this.inputDistributId = value.uid;
      this.inputDistribut = value.distributvalue;
    },
    // 分配角色
    adminApplyRole(idValue) {
      console.log("input", this.multipleSelection);
      this.distributId = idValue.uid;
      var obj = {
        uid: this.distributId,
        rid: this.inputDistribut,
      };
      // 判断点击确定获取到的id和点击input框获取的id是否一致
      if (this.distributId == this.inputDistributId) {
        this.$http({
          method: "post",
          url: "role/adminApplyRole",
          headers: {
            "content-Type": "application/json",
          },
          data: JSON.stringify(obj),
        }).then(({ data }) => {
          // console.log("选择角色", data);
          if (data.flag) {
            // 提示信息
            this.$message({
              type: "info",
              message: "审核成功",
            });
          } else {
            // 提示信息
            this.$message({
              type: "info",
              message: "审核失败",
            });
          }
          // 重新渲染页面
          this.lookAllRoleUsers();
        });
      }
    },
    // 一键分配所选角色
    adminApplyRoleAll() {
      this.$http({
        method: "post",
        url: `role/adminBatchApplyRole?list=${this.distributData}&rid=${this.distributvalue}`,
      }).then(({ data }) => {
        console.log("一键分配", data);
        if (data.flag) {
          // 提示信息
          this.$message({
            type: "info",
            message: "分配成功",
          });
        } else {
          // 提示信息
          this.$message({
            type: "info",
            message: "分配失败",
          });
        }
        // 重新渲染页面
        this.lookAllRoleUsers();
      });
    },
  },
  mounted() {
    this.lookAllRoleUsers();
    this.getRole();
  },
};
</script>



<style scoped>
.distribut {
  margin-right: 20px;
  box-shadow: 0 0 10px 0px rgb(219, 218, 218);
  background-color: #fff;
  padding: 20px 0;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.el-table {
  margin-left: 110px;
  margin-bottom: 10px;
  width: 50%;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-left: 110px;
  margin-bottom: 10px;
  width: 50%;
}
</style>